<template>
  <v-app>
    <v-main>
      <div class="MainContainer flex flex-row">
        <Menu v-if="IsLoggedIn"></Menu>
        <div class="Content flex-1">
          <v-app-bar
            class="app-header"
            v-if="IsLoggedIn"
            color="#79839b"
            dark
            height="56"
            width="100%"
          >
            <div class="d-flex align-center breadcrumbs-container">
              <!-- <span class="title">{{ currentRouteName }}</span> -->
              <v-breadcrumbs
                :items="breadcrumbsItems"
                large
                class="breadcrumbs"
              >
                <template v-slot:divider>
                  <v-icon>mdi-chevron-right</v-icon>
                </template>
              </v-breadcrumbs>
            </div>

            <v-spacer></v-spacer>
            <Search />
            <v-spacer></v-spacer>

            <User></User>
          </v-app-bar>
          <router-view />
        </div>
      </div>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Menu from "@/components/Menu/Menu.vue";
import Search from "@/components/Search/Search.vue";
import User from "@/components/User/User.vue";

@Component({
  components: {
    Menu,
    Search,
    User,
  },
})
export default class App extends Vue {
  currentRouteName = "Dashboard";
  mounted() {
    console.log("App Mounted");
  }
  //面包屑数据
  get breadcrumbsItems() {
    this.currentRouteName = this.$route.path.substring(1);

    let routePath = this.$route.path;

    let sentences = routePath.split(/[/]/);
    sentences.shift();
    const lastItem = sentences.length - 1;
    const items = sentences.map((str: string, index: number) => {
      const currentPage = `/${sentences.slice(0, index + 1).join("/")}`;
      if (lastItem == index) {
        return {
          text: str,
          disabled: true,
          href: currentPage,
        };
      } else {
        return {
          text: str,
          disabled: false,
          href: currentPage,
        };
      }
    });

    return items;
  }

  get IsLoggedIn() {
    return this.$store.state.AuthenticationStore.isLoggedIn;
  }
}
</script>

<style lang="scss">
@import "./AppStyle.scss";
.MainContainer {
  height: 100%;
}
</style>
